<template>
  <div class="exam-item" :key="refresh">
    <h2
      class="organization-lists-title"
    >
      <b>学习内容：</b>{{ data.learnTxt }}
      <!--<h2 class="organization-lists-title"><b>学习内容：</b>{{data.learnTxt}}-->
      <div v-if="data.fileId && data.fileId !== ''" class="content-img">
        <img
          :src="tools.getImgUrl(data.fileId)"
          @click="showImagePreview(data.fileId)"
        />
      </div>
    </h2>
    <ul>
      <li v-if="data.topicType === '1'" class="text-wrap">
        <div class="index">
          <span class="icon-text">{{ index + 1 }}</span>
        </div>
        <div class="cont-wrap">
          <h2 class="subject-title">【单选】{{ data.title }}</h2>
          <p class="right-answer">
            正确答案：{{ data.rightAnswer }}
          </p>
          <div class="types-lists answer-notice-lists">
            <div
              v-for="(examAnswerVoList1, index_) in data.ext"
              :key="examAnswerVoList1.index"
            >
              <div class="mui-input-row mui-radio mui-left flex-center">
                <label class="answer-value"
                >{{ examAnswerVoList1.title }}
                  <input
                    v-if="findGroup.subResult === '0'"
                    @click="
                              radioSelectItem(index, examAnswerVoList1.index)
                            "
                    :name="data.id"
                    value="type1"
                    type="radio"
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '1'
                            "
                    :name="data.id"
                    value="type3"
                    type="radio"
                    :checked="true"
                    disabled
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '0'
                            "
                    :name="data.id"
                    value="type3"
                    type="radio"
                    :checked="false"
                    disabled
                  />
                </label>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li v-if="data.topicType === '2'" class="text-wrap">
        <div class="index">
          <span class="icon-text">{{ index + 1 }}</span>
        </div>
        <div class="cont-wrap">
          <h2 class="subject-title">【多选】{{ data.title }}</h2>
<!--          <p class="right-answer" v-if="findGroup.subResult === '1'">-->
          <p class="right-answer">
            正确答案：{{ data.rightAnswer }}
          </p>
          <div class="types-lists answer-notice-lists">
            <div
              v-for="(examAnswerVoList1, index_) in data.ext"
              :key="examAnswerVoList1.index"
            >
              <div
                class="mui-input-row mui-checkbox mui-left flex-center"
              >
                <label class="answer-value"
                >{{ examAnswerVoList1.title }}

                  <input
                    v-if="findGroup.subResult === '0'"
                    @click="
                              checkboxSelectItem(index, examAnswerVoList1.index)
                            "
                    :name="data.id"
                    value="type2"
                    type="checkbox"
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '1'
                            "
                    :name="data.id"
                    value="type3"
                    type="checkbox"
                    :checked="true"
                    disabled
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '0'
                            "
                    :name="data.id"
                    value="type3"
                    type="checkbox"
                    :checked="false"
                    disabled
                  />
                </label>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li v-if="data.topicType === '4'" class="text-wrap">
        <div class="index">
          <span class="icon-text">{{ index + 1 }}</span>
        </div>
        <div class="cont-wrap">
          <h2 class="subject-title">
            【填空】
            <input
              type="text"
              @blur="inputParentBlur"
              class="input-hidden"
              v-model="data._enterText"
              @input="onInputParent($event, data)"
              :id="'inputParent' + data.id"
              autocomplete="off"
            />
            <template
              v-for="(item, index) in writeTitle(data.title, data)"
            >
              <template v-if="index > 0"
              ><span
                :class="getWriteInputClass(data, index)"
                class="write-block"
              ><input
                :key="'input' + data.id + index + key"
                @click.stop="selectInput(data)"
                type="text"
                :id="'input' + data.id + index"
                readonly
                :value="getEnterVal(data, index - 1)"
                maxlength="1"/></span
              ></template>
              <template>{{ item }}</template>
            </template>
          </h2>

          <p class="right-answer" v-if="findGroup.subResult === '1'">
            正确答案：{{ data.rightAnswer }}
          </p>
          <p class="pdv-2"></p>
        </div>
      </li>
      <div class="">
        <div
          class="organization-lists-title"
          v-if="data.originFlag == '4'"
        >
          <b>是否采纳：</b>{{ getAdoptFlag(data.adoptFlag) }}
          <!--<i class="pdh-2"></i>
          {{ data.originName }}-->
        </div>
      </div>
      <li v-if="data.topicType === '3'" class="text-wrap">
        <div class="index">
          <span class="icon-text">{{ index + 1 }}</span>
        </div>
        <div class="cont-wrap">
          <h2 class="subject-title">【判断题】{{ data.title }}</h2>
<!--          <p class="right-answer" v-if="findGroup.subResult === '1'">-->
          <p class="right-answer">
            正确答案：{{ data.rightAnswer }}
          </p>
          <div class="types-lists answer-notice-lists">
            <div
              v-for="(examAnswerVoList1, index_) in data.ext"
              :key="examAnswerVoList1.index"
            >
              <div class="mui-input-row mui-radio mui-left flex-center">
                <label class="answer-value"
                >{{ examAnswerVoList1.title }}
                  <input
                    v-if="findGroup.subResult === '0'"
                    @click="
                              radioSelectItem(index, examAnswerVoList1.index)
                            "
                    :name="data.id"
                    value="type3"
                    type="radio"
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '1'
                            "
                    :name="data.id"
                    value="type3"
                    type="radio"
                    :checked="true"
                    disabled
                  />
                  <input
                    v-if="
                              findGroup.subResult === '1' &&
                              examAnswerVoList1.choose === '0'
                            "
                    :name="data.id"
                    value="type3"
                    type="radio"
                    :checked="false"
                    disabled
                  />
                </label>
              </div>
            </div>
          </div>
        </div>
      </li>
      <div
        class="organization-lists-title"
        v-if="data.originFlag == '2'"
      >
        <b>状态：</b>{{ getAdoptFlag(data) }}
        <!--<i class="pdh-2"></i>
        {{ data.originName }}-->
      </div>
    </ul>
  </div>
</template>

<script>
  import api from "@/common/config/api";
  import tools from "@/utils/tools";
  import _ from "lodash";
  import loginService from "@/service/loginService";
  import moment from "moment";
  import StorageKeys from "@/common/const/StorageKeys";

  export default {
    name: "myQuestionDetailItem",
    props: [ 'oData', 'index' ],
    data() {
      return {
        isLoading: true,
        swipeDataLoading: true,
        hasNoteWeekLoading: true,
        fn: tools,
        key: "",
        tabIndex: 0,
        hasNoteWeek: false,
        isInputing: false,
        hasAnswer: false,
        alreadAnswer: false,
        fromSuperMarket: false, // 红云超市
        answerScoreData: {}, // 积分兑换数据
        swipeData: [],
        groupTopic: {},
        findGroup: {},
        tipData: {},
        data: {},
        oneRecordTipData: {},
        userDtlInfo: 0.0,
        showButton: false,
        tuihuan: false,
        toast: null,
        refresh: null,
      };
    },
    watch: {
      oData(newVal){
        // this.data = newVal
        // this.loadData()
      }
    },
    created() {
      this.init()
    },
    methods: {
      /*页面初始化*/
      init() {
        this.hasAnswer = true
        this.data = _.extend({}, this.oData)
        this.loadData()
      },
      loadData() {
        this.fetchService.examUserTopicDetail(this.data.id).then(res => {
          if (res.code !== 0) {
            return false
          }
          this.data.answerList = res.data.answerList
          this.data.adoptFlag = res.data.adoptFlag
          this.swipeData = [this.data]
          this.swipeData.map((v, index) => {
            let rightAnswer = "";
            let extArr = v.answerList || [];
            extArr.map((w, index_) => {
              w._title = w.title;
              switch (index_) {
                case 0:
                  w.title = "A、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "A";
                  }
                  break;
                case 1:
                  w.title = "B、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "B";
                  }
                  break;
                case 2:
                  w.title = "C、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "C";
                  }
                  break;
                case 3:
                  w.title = "D、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "D";
                  }
                  break;
                case 4:
                  w.title = "E、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "E";
                  }
                  break;
                case 5:
                  w.title = "F、" + w.title;
                  if (w.right === "1") {
                    rightAnswer = rightAnswer + "F";
                  }
                  break;
              }
            });
            v.ext = extArr;
            v.rightAnswer = rightAnswer;
            // 填空题
            if (v.topicType === "4") {
              let _rightAnswers = [];
              extArr.forEach((v) => {
                _rightAnswers.push(v._title);
              });
              v.rightAnswer = _rightAnswers.join("、");
            }
          });
          this.refresh = Date.now()
          console.log(this.data)
        })
      },
      /*获取填空答案*/
      getAnswerArr(answers, item) {
        let ret = [];
        let temp = [];
        let i = 0;
        let answerLenModel = item.title.match(/(\[@\])+/g);
        answerLenModel = answerLenModel.map((v) => {
          return v.replace(/\[@\]/g, "@");
        });
        for (; i < answers.length; i++) {
          var v = answers[ i ];
          if (v === undefined || v === "") {
            temp.push(" ");
          } else {
            temp.push(v);
          }
        }
        temp = temp.join("").split("&^");
        temp.forEach((v) => {
          if (v !== "") {
            ret.push(v);
          }
        });
        if (answerLenModel.length !== ret.length) {
          let str = ret[ 0 ];
          let lastIndex = 0;
          answerLenModel.map((v, index) => {
            ret[ index ] = str.substr(lastIndex, v.length);
            lastIndex += v.length;
          });
        }
        ret = ret.map((v, index) => {
          let modelLen = answerLenModel[ index ].replace(/\[@\]/g, "@").length;
          return v.substr(0, modelLen);
        });
        return ret;
      },
      findGroupTopic() {
        this.tabIndex = 0;
        let data = {
          // groupTime: '2019-12-29' // 测试用
        };
        // loginService.findGroupTopicFlagTest(data).then((res) => {
        loginService.findGroupTopicFlag(data).then((res) => {
          if (res.code !== 200) {
            this.hasAnswer = false;
            this.showToastTxtOnly(res.message || "系统繁忙，请稍候再试！");
            return;
          }
          this.hasAnswer = true;
          this.groupTopic = res.data;
          if (res.data.subResult === "0") {
            this.alreadAnswer = true;
          } else {
            this.alreadAnswer = false;
          }
          // test
          isDebbug && ( this.alreadAnswer = true );
          this.oneAnswer();
        });
      },
      showImg(fileId) {
        let fileUrl = this.tools.getImgUrl(fileId);
        console.log("-------------fileUrl=", fileUrl);
        return fileUrl;
      },
      getTime(createTime) {
        return moment(createTime).format("MM月DD日");
      },
      radioSelectItem(rootIndex, id) {
        // if (!this.swipeData[rootIndex].result) {
        //   this.selectNum++
        // }
        this.swipeData[ rootIndex ].result = id;
        console.log("result=", this.swipeData[ rootIndex ].result);
      },
      checkboxSelectItem(rootIndex, id) {
        if (this.swipeData[ rootIndex ].checkboxResult) {
          let index = this.swipeData[ rootIndex ].checkboxResult.indexOf(id);
          if (index !== -1) {
            this.swipeData[ rootIndex ].checkboxResult.splice(index, 1);
            // if (this.swipeData[rootIndex].checkboxResult.length === 0) {
            //   this.selectNum--
            // }
          } else {
            this.swipeData[ rootIndex ].checkboxResult.push(id);
          }
        } else {
          this.swipeData[ rootIndex ].checkboxResult = [];
          this.swipeData[ rootIndex ].checkboxResult.push(id);
          // this.selectNum++
        }
        console.log("checkboxResult=", this.swipeData[ rootIndex ].checkboxResult);
      },
      findHints() {
        this.isLoading = true;
        let data = {
          type: "1",
        };
        loginService.findHints(data).then((res) => {
          this.isLoading = false;
          if (res.code === 200) {
            this.tipData = res.data;
            if (this.$store.state.oneAnswerFrom) {
              if (res.data.bulletBoxHint && res.data.bulletBoxHint !== "") {
                tools.alert(res.data.bulletBoxHint, (...arg) => {
                });
              }
              this.$store.state.oneAnswerFrom = false;
            }
          }
        });
      },
      findOneRecordHints() {
        let data = {
          type: "3",
        };
        loginService.findHints(data).then((res) => {
          if (res.code === 200) {
            this.oneRecordTipData = res.data;
          }
        });
      },
      findUserQuestion() {
        let data = {};
        loginService.findUserQuestion(data).then((res) => {
          if (res.code !== 200) {
            this.showButton = false;
            //            this.showToastTxtOnly(res.message)
          } else {
            this.showButton = true;
          }
        });
      },
      userDtlInfos() {
        loginService.userDtlInfo().then((res) => {
          if (res.code === 200) {
            this.tuihuan = true;
            this.userDtlInfo = res.data.dtl;
          } else {
            //            this.showToastTxtOnly(res.message)
          }
        });
      },
      showImagePreview(fileId) {
        if (fileId.length < 1) {
          return false;
        }
        let fileUrl = this.tools.getImgUrl(fileId);
        let imgs = [ fileUrl ];
        this.$createImagePreview(
          {
            initialIndex: 0,
            imgs: imgs,
          },
          (h) => {
            return h(
              "div",
              {
                class: {
                  "image-preview-custom-header": false,
                },
                slot: "header",
              },
              ""
            );
          }
        ).show();
      },
      getAdoptFlag(data){
        if(data.handleFlag==='1'){
          if(data.adoptFlag ==='1'){
            return '已采纳'
          }else if(data.adoptFlag ==='0'){
            return '未采纳'
          }
          return '已通过'
        }else if(data.handleFlag==='9'){
          return '未通过'
        }else{
          return '审核中'
        }
      },
      showToastTxtOnly(text) {
        this.toast = this.$createToast({
          txt: text,
          type: "txt",
          time: 3000,
          onTimeout: () => {
            this.toast.hide();
          },
        });
        this.toast.show();
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";

  .list-wenda .item {
    padding-bottom: 20px;
    margin-bottom: 0px;
  }

  .title-wrap {
    .title {
      font-size: 16PX;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }

  .on-input {
    input {
      border-color: orange;
      background-color: rgba(orange, 0.3);
    }
  }

  .tab li span {
    font-size: 16PX;
  }

  .cube-radio-label,
  .cube-checkbox-input {
    font-size: 16PX;
  }

  .input-row-wrap input,
  .input-row-wrap textarea {
    font-size: 16PX;
  }

  .content-img {
    margin-top: 20px;
    width: 100%;
    /*height:calc(85vw * 9 / 16);*/
    overnflow: hidden;
    img {
      width: 100%;
      height: auto;
    }
  }

  .myProject-img {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
    }
  }
</style>
